<template>
  <div class="q-pa-sm">
    <q-card flat square>
      <q-card-section class="q-pa-none q-py-md row">
        <div class="col-sm-2 col-xs-12 q-pb-sm">
          <q-tabs v-model="settingsTab" align="left" active-color="primary" active-bg-color="blue-1" class="text-grey-10" vertical >
            <q-tab name="basicSettings" label="服务商信息" style="justify-content: left" content-class="q-pl-md" />
            <q-tab name="safeSettings" label="股权日志" style="justify-content: left" content-class="q-pl-md" />
            <q-tab name="accountBind" label="领取红包明细" style="justify-content: left" content-class="q-pl-md" />
          </q-tabs>
        </div>
        <q-separator :vertical="$q.screen.gt.xs" v-show="$q.screen.gt.xs" />
        <div class="col-sm col-xs-12 q-px-md q-pt-none">
          <q-tab-panels v-model="settingsTab" animated transition-prev="fade" transition-next="fade" >
            <q-tab-panel name="basicSettings" class="row q-pt-sm">
              <!--<div class="text-h5 col-12 q-mb-md">用户信息</div>
              <div class="lt-sm col-xs-12 q-mb-md">
                <span class="text-center block">
                  <q-img src="/img/user/woman.jpg" width="180px" :ratio="10 / 10"/>
                </span>
                <span class="text-center block">
                  <q-btn unelevated color="primary" label="更换头像" con="unarchive" />
                </span>
              </div>-->
              <div class="col-md-4 col-sm-5 col-xs-12 q-gutter-y-md q-pt-md q-pl-md q-pb-md">
                <h5 v-if="userinfo.group_id == 1">修改服务商</h5>
                <span class="row q-gutter-x-lg" style="width:400px;">
                  <q-input  flat square  label="UID" disable v-model="form.uid" />
                </span>
                <span class="row q-gutter-x-lg" style="width:400px;">
                  <q-input square outlined label="姓名" v-model="userinfo.name" />
                  <q-btn label="修改用户姓名" @click="save_user_name"  size="md" style="height:35px;margin-top: 10px;" color="primary" unelevated />
                </span>
                <span class="row q-gutter-x-lg">
                  <q-input square outlined label="手机号码"  v-model="userinfo.mobile" />
                  <q-btn label="修改用户手机号码" @click="save_user_mobile" size="md" style="height:35px;margin-top: 10px;"  color="primary" unelevated />
                </span>
                <span class="row q-gutter-x-lg" v-if="userinfo.group_id == 1" >
                  <q-select  dense square outlined label="服务商状态" options-dense  style="width:185px;"
                             :options="[{label:'待认证', value: 1} ,{label: '已认证', value: 3}]" v-model="user_status" />
                  <q-btn label="修改服务商状态" @click="save_user_status"  size="md"  style="height:35px;margin-top: 2px;"  color="primary" unelevated />
                </span>
                <span class="row q-gutter-x-lg" >
                <q-select  dense square outlined label="会员组别" options-dense  style="width:185px;"
                           :options="user_group_option" v-model="user_group" />
                  <q-btn label="修改服务商组别" @click="save_user_group" style="height:35px;margin-top: 2px;"  size="md" color="primary" unelevated />
                </span>
                <span class="row q-gutter-x-lg">
                  <q-input type="text" outlined square label="积分" v-model="userinfo.point" />
                </span>
                <span class="row q-gutter-x-lg">
                  <q-input type="text" outlined square  label="commission_wait" v-model="userinfo.commission_wait" />
                </span>
                <span class="row q-gutter-x-lg">
                  <q-input type="text" outlined square label="commission" v-model="userinfo.commission" />
                </span>
                <q-input type="text" outlined square label="推荐人id" v-model="userinfo.recommend_id" />
                <span class="text-left block">
                  <q-btn  label="返回" size="md" color="primary" class="btn-close" style="width:150px;" @click="close" />
                </span>
              </div>
              <div class="gt-xs col-md-8 col-sm-7" style="padding-left: 50px;padding-top: 20px;">
                <span class="text-left block" style="padding: 0px 20px 40px 0px;">
                  <h5>服务商详情</h5>
                </span>
                <span class="text-left block" style="padding: 10px 20px;">
                   服务商id : {{form.uid}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  服务商姓名 : {{userinfo.name}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  服务商电话 : {{userinfo.mobile}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  是否认证 : {{user_status.label}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  服务商类型 : {{user_group.label}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  新粉丝数量 : {{userinfo.fans_new}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  总粉丝数量 : {{userinfo.fans_total}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  有效粉丝数量 : {{userinfo.fans_valid}}
                </span>
              </div>
            </q-tab-panel>
            <q-tab-panel name="safeSettings" class="q-pt-sm">
              <div class="text-h5 col-12 q-mb-md">股权日志列表</div>
              <h5 class="view_title justify-between q-px-md">
                <q-btn dense outline round icon="clear" size="sm" v-close-popup />
              </h5>
              <q-table
                row-key="id"
                color="primary"
                class="cross_table"
                separator="cell"
                :columns="stockcolumns" :data="stocklogList" :pagination.sync="stockPagination"
                :rows-per-page-options="[10, 20, 50, 100]"  @request="DialogStocklog" >

                <template #body-cell-type="props">
                  <q-td key="type" :props="props">
                    <q-item v-if="props.row.event==1">余额变化</q-item>
                    <q-item v-if="props.row.event==2">冻结余额变化</q-item>
                    <q-item v-if="props.row.event==3">通证变化</q-item>
                    <q-item v-if="props.row.event==4">冻结通证</q-item>
                  </q-td>
                </template>


                <template #body-cell-event="props">
                  <q-td key="event" :props="props">
                    <q-item v-if="props.row.event==1">充值到预存款</q-item>
                    <q-item v-if="props.row.event==2">从预存款提现</q-item>
                    <q-item v-if="props.row.event==3">从预存款支付</q-item>
                    <q-item v-if="props.row.event==4">退款到预存款</q-item>
                    <q-item v-if="props.row.event==5">佣金提现到预存款</q-item>
                    <q-item v-if="props.row.event==6">充值奖励</q-item>
                  </q-td>
                </template>

              </q-table>
            </q-tab-panel>
            <q-tab-panel name="accountBind" class="q-pt-sm">
              <div class="text-h5 col-12 q-mb-md">红包列表</div>
              <q-list class="text-body2">
                <q-table row-key="id" color="primary" class="cross_table" separator="cell" :columns="mytickercolumns"
                         :data="myticketlist" :pagination.sync="mytickerPagination" :rows-per-page-options="[10, 20, 50, 100]"
                         @request="openDialogMyticketlist">
                </q-table>
                <!--<q-separator inset="" spaced="10px" />
                <q-item>
                  <q-item-section avatar>
                    <q-icon
                      size="xl"
                      color="info"
                      style="cursor: pointer"
                      class="iconfont iconweixin q-ml-sm"
                    />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>绑定微信</q-item-label>
                    <q-item-label class="text-grey-6">
                    </q-item-label>
                  </q-item-section>
                  <q-item-section avatar>
                    <q-btn flat unelevated color="primary" label="绑定" />
                  </q-item-section>
                </q-item>-->
                <q-separator inset="" spaced="10px" />
              </q-list>
            </q-tab-panel>

          </q-tab-panels>
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>

<script>
import { IndexMixin } from 'boot/mixins';
import confirm from 'components/confirm';
import { requiredTest } from 'boot/inputTest';
export default {
  name: 'Settings',
  data() {
    return {
      search_name: '',
      user_status: {label: '已认证', value: 3},
      headers: [{ name: 'Authorization', value: localStorage.Authorization }],
      uploadUrl: `${process.env.BASE_URL}/sys/common/upload`,
      imgUrl: `${process.env.BASE_URL}/sys/common/static`,
      url: {
        detail: '/myinfo',
        save_username: '/setusername',
        save_usermobile: '/setusermobile',
        save_usergroupid: '/setusergroupid',
        save_userstatus: '/setuserstatus'
      },
      stockcolumns: [
        { name: "userId", align: "center", label: "服务商uid", field: "userId", },
        { name: "type", align: "center", label: "类型", field: "type", },
        {
          name: "event", align: "center", label: "操作类型", field: "event",
        },
        // { name: "sourceId", align: "center", label: "源ID号", field: "sourceId", },
        {
          name: "amount", align: "center", label: "当前金额", field: "amount",
        },{
          name: "amountLog", align: "center", label: "变化之前的金额", field: "amountLog",
        },{
          name: "note", align: "center", label: "备注", field: "note",
        }
      ],
      mytickercolumns: [
        {
          name: "name",
          align: "center",
          label: "红包名称",
          field: "name",
        },
        {
          name: "user_name",
          align: "center",
          label: "服务商名",
          field: "user_name",
        },
        {
          name: "create_time",
          align: "center",
          label: "领取红包时间",
          field: "create_time",
        },
      ],
      userinfo: {
        uid: '',
        avatar: 'http://img.gzzsu.com/654321',
        balance: '',
        balance_freeze: '',
        commission: '',
        commission_wait: '',
        ctype: '',
        exp: '',
        group_id: '',
        mobile: '',
        name: '',
        point: '',
        recommend_id: '',
        status: '',
        fans_total: '',
        fans_valid: '',
        fans_new: ''
      },
      settingsTab: 'basicSettings',
      form: {
        uid: ''
      },
      user_group_option: [{ label: '普通用户', value: 0} ,{ label: '服务商', value: 1} ],
      user_group: { label: '普通用户', value: 0},
      stocklogList: [],
      stockPagination:{
        page: 1,
        rowsPerPage: 10,
        descending: false,
        rowsNumber: 0
      },
      mytickerPagination: {
        page: 1,
        rowsPerPage: 10,
        descending: false,
        rowsNumber: 0,
      },
      myticketlist: [],
    };
  },
  methods:{
    requiredTest,
    addBefore() {
    },
    queryParam(){
    },
    DialogStocklog() {
      const url = "/stockloglist";
      this.$axios.post(url, { uid: this.form.uid }).then((r) => {
        if (r.code == 0) {
          this.stocklogList = r.data
          this.stockPagination.rowsNumber = r.count
        }
      });
    },
    getTypeLabel( b ){
      console.log(b)
      if(b == 0){
        return '隐藏'
      }else{
        return '显示'
      }
    },
    save_user_group(){
      this.form.uid = this.form.uid
      this.form.group_id = this.user_group.value
      this.$axios.post(this.url.save_usergroupid, this.form).then((r) => {
        if(r.code == 0){
          this.$q.notify({ position: 'center', color: 'info', textColor: 'blue', icon: 'cloud_done', group: false, html: true, message: '组别保存成功！！',});
        }else{
          this.$q.notify({ position: 'center', color: 'info', textColor: 'red', icon: 'cloud_done', group: false, html: true, message: r.msg,});
        }
      });
    },
    save_user_status(){
      this.form.uid = this.form.uid
      this.form.status = this.user_status.value // 0 待认证 ,1 未认证, 3:认证用户
      this.$axios.post(this.url.save_userstatus, this.form).then((r) => {
        if(r.code == 0){
          this.$q.notify({ position: 'center', color: 'info', textColor: 'blue', icon: 'cloud_done', group: false, html: true, message: '服务商状态保存成功！！',});
        }else{
          this.$q.notify({ position: 'center', color: 'info', textColor: 'red', icon: 'cloud_done', group: false, html: true, message: '保存失败',});
        }
      });
    },
    save_user_mobile(){
      this.form.uid = this.form.uid
      this.form.mobile = this.userinfo.mobile
      this.$axios.post(this.url.save_usermobile, this.form).then((r) => {

        if(r.code == 0){
          this.$q.notify({ position: 'center', color: 'info', textColor: 'blue', icon: 'cloud_done', group: false, html: true, message: '电话号码保存成功！！',});
        }else{
          this.$q.notify({ position: 'center', color: 'info', textColor: 'red', icon: 'cloud_done', group: false, html: true, message: r.msg,});
        }
      }).catch((err)=>{
        if(err.data.code == -1) {
          this.$q.notify({ position: 'center', color: 'info', textColor: 'red', icon: '', group: false, html: true, message: err.data.msg,});
        }
        console.log(err.data)
      });//注意这里，这里是重点！！！;
    },
    save_user_name(){
      this.form.uid = this.form.uid
      this.form.name = this.userinfo.name
      this.$axios.post(this.url.save_username, this.form).then((r) => {
        if(r.code == 0){
          this.$q.notify({ position: 'center', color: 'info', textColor: 'blue', icon: 'cloud_done', group: false, html: true, message: '保存成功！！',});
        }else{
          this.$q.notify({ position: 'center', color: 'info', textColor: 'red', icon: 'cloud_done', group: false, html: true, message:   '保存失败',});
        }
      });
    },
    getUserDetail(){
      this.$axios.post(this.url.detail, this.form).then((r) => {
        if(r.code == 0){
          this.userinfo = r.data
          // 普通用户和服务商的status判断方法不一致
          if(this.userinfo.group_id == 0) {
            if(this.userinfo.status == 2) {
              this.user_status = {label: '已认证', value: 2}
            } else if(this.userinfo.status == 1) {
              this.user_status = {label: '未认证', value: 1}
            } else if(this.userinfo.status == 0) {
              this.user_status = {label: '待认证', value: 0}
            }
            this.user_group = {label: '普通用户', value: 0}
          } else if(this.userinfo.group_id == 1) {
            if(this.userinfo.status == 3) {
              this.user_status = {label: '已认证', value: 3}
            } else if(this.userinfo.status == 1) {
              this.user_status = {label: '待认证', value: 1}
            } else if(this.userinfo.status == 0) {
              this.user_status = {label: '未认证', value: 0}
            }
            this.user_group = {label: '服务商', value: 1}
          } else {
            if(this.userinfo.status == 2) {
              this.user_status = {label: '已认证', value: 2}
            } else if(this.userinfo.status == 1) {
              this.user_status = {label: '未认证', value: 1}
            } else if(this.userinfo.status == 0) {
              this.user_status = {label: '待认证', value: 0}
            }
            this.user_group = {label: '服务商', value: 1}
          }

        }
      });
    },
    openDialogMyticketlist() {
      //我的优惠券
      const url = "/ticketloglist";
      this.$axios.post(url, { uid: this.form.uid }).then((r) => {
        if (r.code == 0) {
          this.myticketlist = r.data
        }
      });
    },
    queryParam2() {
      //组合查询参数
      const data={};
      data['group_id'] = 1;
      if (this.key-0>0) {
        data['uid'] = this.key;
      }

    },
    mytickerQuery() {

    },
    close() {
      // this.$router.go(-1);
      this.$router.push({
        path: '/memberserver/list',
        query: { name: this.search_name ? this.search_name : '' }
      })
    },
  },
  mounted() {
    const user_id = this.$route.query.id
    this.search_name = this.$route.query.name
    this.form.uid = user_id
    this.getUserDetail()
    this.DialogStocklog()
    this.openDialogMyticketlist()
  },
};
</script>

<style scoped>
@import 'http://at.alicdn.com/t/font_2136554_1fgggi4y4wt.css';
</style>
